<template>
  <div class="ai_page">
    <div class="ai_header">
      <div class="ai_title" @click="changePage(0)">驰道大模型</div>
      <div class="ai_time">
        <div class="time_day">{{ currentTime }}</div>
        <div class="time_year">
          <div class="week">{{ currentWeek }}</div>
          <div class="year">{{ currentYear }}</div>
        </div>
      </div>
    </div>
    <div class="ai_content">
      <img
        class="robot_video robot1 fade-in-out"
        :class="{ hidden: currentPage === 1 }"
        :src="videoUrl"
        @click="robotSay"
      />
      <img
        class="robot_video robot2 fade-in-out"
        @click="robotSay"
        :class="{ hidden: currentPage === 0 }"
        :src="VideoUrl2"
      />
      <HomePage @changePage="changePage" v-if="currentPage === 0" />
      <Communicate :access_token="access_token" v-else />
      <TextToVoice ref="textToVoice" />
    </div>
  </div>
</template>

<script>
import HomePage from './homePage.vue'
import Communicate from './communicate.vue'
import TextToVoice from './textToVoice.vue'
const client_id = 'QA5pYX9hGoAK5Oe7vU2Ccqe7'
const client_secret = 'VlKhGgmwXQNpPbIfGBLDaBfheeFbIWzI'
const requestTokenUrl =
  '/oauth/2.0/token?grant_type=client_credentials&client_id=' + client_id + '&client_secret=' + client_secret
export default {
  components: {
    HomePage,
    Communicate,
    TextToVoice,
  },
  props: {},
  data() {
    return {
      access_token: '',
      currentYear: '',
      currentWeek: '',
      currentTime: '',
      videoUrl: require('@/assets/ai_model/robot2.gif'),
      VideoUrl2: require('@/assets/ai_model/robot.gif'),
      timer: null,
      currentPage: 0,
    }
  },
  computed: {},
  watch: {},
  methods: {
    async getToken() {
      // 发送API请求
      const response = await this.$axios.post(requestTokenUrl)

      this.access_token = response.data.access_token
    },
    robotSay() {
      this.$refs.textToVoice.start()
    },
    changePage(page) {
      this.currentPage = page
    },
    updateClock() {
      const now = new Date()
      this.currentYear = this.formatDateToYear(now)
      this.currentTime = this.formatDateToTime(now)
      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.currentWeek = days[now.getDay()]
    },
    // 格式化时间-年月日
    formatDateToYear(date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const d = date.getDate()
      return `${year}-${month > 9 ? month : `0${month}`}-${d > 9 ? d : `0${d}`}`
    },
    // 格式化时间-时分秒
    formatDateToTime(date) {
      const h = date.getHours()
      const m = date.getMinutes()
      const s = date.getSeconds()
      return `${h > 9 ? h : `0${h}`}:${m > 9 ? m : `0${m}`}:${s > 9 ? s : `0${s}`}`
    },
  },
  created() {
    this.getToken()
  },
  mounted() {
    // 初始加载
    this.updateClock()

    // 每秒更新一次
    this.timer = setInterval(() => {
      this.updateClock()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>
<style scoped lang="less">
.ai_page {
  width: 100%;
  height: 100%;
  background: url(~@/assets/ai_model/bg.png) no-repeat 100% 100%;
  background-size: cover;
  .ai_header {
    height: 12.96vh;
    padding: 4.63vh 10vw 0 9.375vw;
    display: flex;
    justify-content: space-between;
    .ai_title {
      cursor: pointer;
      vertical-align: middle;
      font-size: 6.67vh;
      line-height: 6.67vh;
      font-family: YouSheBiaoTiHei;
      color: #666666;
      background: linear-gradient(180deg, #0072ee 0%, #003d89 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .ai_time {
      display: flex;
      justify-content: space-between;
      font-family: MiSans-Medium, MiSans;
      font-weight: 500;
      color: #003d89;
      .time_day {
        font-size: 4.44vh;
        margin-right: 15px;
      }
      .time_year {
        font-size: 1.94vh;
        .week {
          margin-bottom: 2px;
        }
      }
    }
  }
  .ai_content {
    position: relative;
    width: 83.33vw;
    height: 81.48vh;
    margin-left: 7.81vw;
    background-color: #fff;
    background: url(~@/assets/ai_model/content_bg.jpg) no-repeat 100% 100%;
    background-size: cover;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    .robot_video {
      position: absolute;
      z-index: 3;
    }
    .robot1 {
      cursor: pointer;
      width: 16vw;
      height: 34.5vh;
      top: 10.65vh;
      left: 9.48vw;
    }
    .robot2 {
      cursor: pointer;
      width: 14.7917vw;
      height: 28.7vh;
      bottom: 1.3vh;
      right: 3.6458vw;
      z-index: 5;
    }
  }
}
.fade-in-out {
  opacity: 1;
  transition: opacity 0.5s;
}

.fade-in-out.hidden {
  opacity: 0;
}
</style>
